<template>
  <div id="blogDetail">
    <div style="height: 85%; overflow-y: scroll; overflow-x: hidden">
      <div class="blog-info-box" ref="swiper">
        <!--        <div class="swiper-item" v-for="(img, i) in blog.images" :key="i">-->
        <img :src="blog.imageUrl" alt="" style="width: 100%" height="100%">
        <!--        </div>-->
      </div>
      <div class="basic">
        <div class="basic-icon" @click="toOtherInfo">
          <img
              :src="blog.avatarUrl || 'http://img2.baidu.com/it/u=1217440372,1279017633&fm=253&app=138&f=JPEG?w=800&h=800'"
              alt="">
        </div>
        <div class="basic-info">
          <div class="name">{{ blog.username }}</div>
          <span class="time">{{ dayjs(blog.createTime).format('YYYY年MM月DD日') }}</span>
        </div>
        <div style="width: 20%">
          <div class="logout-btn" @click="handlerFollow" v-show="!currentLoginUser || currentLoginUser.id !== blog.userId ">
            {{ followed ? '取消关注' : '关注' }}
          </div>
        </div>
      </div>
      <div class="blog-text" v-html="blog.content">
      </div>
      <div class="zan-box">
        <div>
          <svg @click="handlerLike" t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2187" width="20" height="20">
            <path
                d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                p-id="2188" :fill="blog.isLike ? '#ff6633' : '#82848a'"></path>
          </svg>
        </div>
        <div class="zan-list">
          <div class="user-icon-mini" v-for="likeUser in likeBlogTopUserList" :key="likeUser.id">
            <img
                :src="likeUser.avatarUrl || 'http://img2.baidu.com/it/u=1217440372,1279017633&fm=253&app=138&f=JPEG?w=800&h=800'"
                alt="">
          </div>
          <div style="margin-left:10px;text-align: center;line-height: 24px;">{{ blog.liked }}人点赞</div>
        </div>
      </div>
      <div class="blog-divider"></div>
    </div>
    <div class="foot">
      <div class="foot-box">
        <div class="foot-view" @click="handlerLike()">
          <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2187" width="26" height="26">
            <path
                d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                p-id="2188" :fill="blog.isLike ? '#ff6633' : '#82848a'"></path>
          </svg>
          <span :class="{liked: blog.isLike}">{{ blog.liked }}</span>
        </div>
      </div>
      <div style="width: 40%">
      </div>
      <div class="foot-box">
        <div class="foot-view" ><van-icon style="display: inline-block" size="26" name="comment-o" /></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import request from "../../plugins/request.ts";
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import dayjs from "dayjs";
import {useUserStore} from "../../stores";
import {showFailToast} from "vant";
import {showSuccessToast} from "vant/es";

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const currentLoginUser = userStore.currentLoginUserInfo
const blogId = ref<number>(0)
//博客信息
const blog = ref({})
//是否关注
const followed = ref(false)
//点赞博客的top5
const likeBlogTopUserList = ref([])

/**
 * 查询当前用户是否点赞，还有blog完整信息
 */
const queryBlogById = async (id: number) => {
  const result = await request.get("/blog/" + id)
  if (result.data.code === 200 && result.data.data) {
    blog.value = result.data.data
    // 获取blog的详情成功后，还要获取点赞的top5
    await queryLikeBlogTop5(id)
  } else {
    showFailToast(result.data.data.description)
    blog.value.liked++
  }
}
/**
 * 查询当前登录用户是否关注发布博客的用户
 */
const isFollowed = async (userId : number) => {
  const result = await request.get("/follow/or/not/" + userId)
  if (result.data.code === 200 && result.data.data) {
    followed.value = result.data.data
  }
}
/**
 * 获取点赞当前blog的前五人
 */
const queryLikeBlogTop5 = async (blogId: number) => {
  const result = await request.get("/blog/likes/" + blogId)
  if (result.data.code === 200 && result.data.data) {
    likeBlogTopUserList.value = result.data.data
  } else {
    showFailToast("获取点赞top5失败" + result.data.description)
  }
}
/**
 * 实现当前页面对博客的点赞功能，并排序
 */
const handlerLike = async () => {
  const result = await request.put("/blog/like/" + blogId.value)
  if (result.data.code === 200 && result.data.data) {
    const res = await request.get("/blog/" + blogId.value)
    if (res.data.code === 200 || res.data.data) {
      blog.value = res.data.data
      await queryLikeBlogTop5(blogId.value)
    } else {
      showFailToast("重新获取笔记失败" + res.data.message)
    }
  } else {
    showFailToast("点赞失败"+ result.data.message)
  }
}
/**
 * 处理点击关注事件
 */
const handlerFollow = async () => {
  // 请求时传入当前blog的创建用户
  const result = await request.put("/follow/" + blog.value.userId + "/" + !followed.value);
  if (result.data.code === 200 && result.data.data) {
    showSuccessToast(followed.value ? "已取消关注" : "已关注")
    followed.value = !followed.value
  } else {
    showFailToast("关注失败，" + result.data.message)
  }
}

onMounted(async () => {
  blogId.value = route.query.blogId;
  await queryBlogById(blogId.value)
  await isFollowed(blog.value.userId)
})
</script>

<style scoped>
#blogDetail {
  font-size: 12px;
}
.blog-divider {
  height: 10px;
  background-color: #f3f1f1;
}

.blog-info-box {
  position: relative;
  overflow: hidden;
  height: 85%;
  width: 100%;
}

.blog-info-box.indicator {
  position: absolute;
  right: 3vw;
  bottom: 3vw;
  width: 10vw;
  height: 10vw;
  line-height: 10vw;
  border-radius: 5vw;
  text-align: center;
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 14px;
}

.swiper-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.basic {
  display: flex;
  justify-content: space-between;
  padding: 15px 15px 5px 15px;
}

.basic-icon {
  width: 40px;
  height: 40px;
  padding: 1px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.07);
}

.basic-icon img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.shop-basic {
  margin: auto;
  width: 80%;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  padding: 15px 15px 5px 15px;
  box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.1);
}

.shop-icon {
  width: 50px;
  height: 50px;
}

.shop-icon img {
  width: 100%;
  height: 100%;
}

.zan-box {
  width: 90%;
  margin: auto;
  padding: 20px 0 10px;
  display: flex;
  justify-content: space-between;
}

.zan-list {
  width: 88%;
  display: flex;
}

.user-icon-mini {
  margin-left: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 1px;
  background-color: #fff;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.07);
}

.user-icon-mini img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.basic-info {
  width: 60%;
}

.basic-info .name {
  font-weight: bold;
  font-size: 12px;
  color: #446889;
}

.basic-info .time {
  display: inline-block;
  padding: 0 10px;
  margin: 5px 0 10px;
  border-radius: 2px;
  opacity: .4;
}

.logout-btn {
  width: 100%;
  height: 25px;
  line-height: 25px;
  border-radius: 12px;
  text-align: center;
  border: #ff6633 1px solid;
  color: #ff6633;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.04);
}

.blog-text {
  width: 90%;
  padding: 5px 20px;
}

.comments-head span {
  font-size: 12px;
  font-weight: normal;
  color: #82848a;
}

.comment-tags div {
  width: 25%;
  border: 1px solid #427fc4;
  border-radius: 5px;
  text-align: center;
  color: #427fc4;
  padding: 5px 10px;
  margin-top: 7px;
}

.comment-icon img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.comment-user span {
  font-size: 10px;
  padding: 0 10px;
  border-radius: 8px;
  background-color: #f7b253;
  color: white;
}

.comment-images img {
  height: 94px;
  width: 92px;
  border-radius: 5px;
  margin-right: 5px;
}
.foot {
  width: 100%;
  height: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -1px 2px 1px rgba(0,0,0,0.1);
  position: fixed;
  bottom: 0;
  background-color: #eeeeee;
}
.foot-box {
  width: 20%;
}
.foot-view {
  display: inline-block;
}
</style>